<template>
  <div id="project-page">

    <div class="container">
      <div class="controls-group"
           style="height: 90px; padding: 0 8px; display: flex; justify-content: flex-end; align-items: center;">
        <div class="control">
          <el-tooltip
            effect="dark"
            content="创建项目（Ctrl+Alt+N）"
            placement="top-start"
          >
            <el-button
              icon="el-icon el-icon-plus"
              type="success"
              @click="handleBtnCreateClick"
            >创建项目
            </el-button>
          </el-tooltip>
        </div>
      </div>
      <div class="table-con" style="margin: 0 8px; border: 1px solid #efefef; min-height: calc(100vh - 200px);">
        <el-table :data="tableData">
          <el-table-column align="center" label="基准测试项目名称" prop="name"/>
          <el-table-column width="340px">
            <template v-slot="scope">
              <el-button-group>
                <el-button
                  icon="el-icon el-icon-warning"
                  type="success"
                  @click="handleBtnEnterClick(scope.row.id)"
                >进入
                </el-button>
                <el-button
                  icon="el-icon el-icon-edit"
                  type="success"
                  @click="handleBtnEditorClick(scope.row)"
                >编辑
                </el-button>
                <el-button
                  icon="el-icon el-icon-delete"
                  type="danger"
                  @click="handleBtnDeleteClick(scope.row.id)"
                >删除
                </el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <project-adder
      ref="project-adder"
      :visible.sync="isShowProjectAdder"
      @confirm="handleProjectAdderConfirm"
    />

    <project-editor
      ref="project-editor"
      :form="curEditProjectData"
      :visible.sync="isShowProjectEditor"
      @confirm="handleProjectEditorConfirm"
    />

  </div>
</template>

<script>
import mixinTable from '@/mixins/mixin-table'
import api from '@/api'
import ProjectAdder from '@/views/benchmarks/components/ProjectAdder'
import ProjectEditor from '@/views/benchmarks/components/ProjectEditor';

export default {
  name: "ProjectPage",

  components: {ProjectEditor, ProjectAdder},

  mixins: [mixinTable],

  data() {
    return {
      isShowProjectAdder: false,
      isShowProjectEditor: false,
      curEditProjectData: {
        add_time: '',
        exec_command: '',
        name: '',
        update_time: '',
        workdir: ''
      }
    }
  },

  created() {
    this.$shortcut.bind('ctrl+alt+n', () => {
      this.isShowProjectAdder = !this.isShowProjectAdder
    })
  },

  destroyed() {
    this.$shortcut.unbind('ctrl+alt+n')
  },

  methods: {
    fetchData() {
      api.projects
         .list({})
         .then(({data}) => {
           this.tableData = data.results || []
         })
         .catch(err => {
           this.$message.error('网络异常')
         })
    },

    handleBtnCreateClick() {
      this.isShowProjectAdder = true
    },

    handleBtnEditorClick(data) {
      this.isShowProjectEditor = true
      this.curEditProjectData = data
    },

    handleBtnEnterClick(projectId) {
      if (projectId) {
        this.$router.push({name: 'project-detail', params: {projectId}})
      } else {
        this.$message.warning('数据已生效')
      }
    },

    handleBtnDeleteClick(projectId) {
      if (projectId) {
        this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
            .then(() => {
              api.projects
                 .rm({}, projectId)
                 .then(res => {
                   this.$message.success('删除完成')
                   this.fetchData()
                 })
                 .catch(err => {
                   this.$message.error('删除失败')
                   this.fetchData()
                 })
            })
      }
    },

    handleProjectEditorConfirm(data) {
      api.projects
         .update(data, data.id)
         .then(res => {
           this.isShowProjectEditor = false
           this.$message.success('项目修改完成')
           this.fetchData()
         })
         .catch(err => {
           const errList = Object.values(err.response.data || {}).join(';')
           if (errList.includes('项目 已存在')) {
             this.$message.warning('项目名称已存在')
           } else {
             this.$message.error('创建失败')
           }
           this.fetchData()
         })
    },

    handleProjectAdderConfirm(data) {
      api.projects
         .create(data)
         .then(res => {
           this.isShowProjectAdder = false
           this.$message.success('项目创建完成')
           this.fetchData()
         })
         .catch(err => {
           const errList = Object.values(err.response.data || {}).join(';')
           if (errList.includes('项目 已存在')) {
             this.$message.warning('项目名称已存在')
           } else {
             this.$message.error('创建失败')
           }
           this.fetchData()
         })
    }
  }
}
</script>

<style scoped>

</style>
